<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>签到上墙</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <link rel="stylesheet" href="css/meetIng.css">
    <link rel="stylesheet" href="./css/vant.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <div class="formBox">
                <div>
                    <span>姓名</span>
                    <input type="text" v-model="name" placeholder="请输入姓名">
                </div>
                <div>
                    <span>联系方式</span>
                    <input type="number" v-model="tel" placeholder="请输入联系方式">
                </div>
                <div>
                    <span>地区</span>
                    <textarea v-model="area" placeholder="请选择您的地区" @click="showSelect=true" readonly
                        :autosize="{minRows:1,maxRows:10}"></textarea>
                </div>
                <div>
                    <span>金额档位</span>
                    <input type="text" v-model="moneyText" placeholder="请选择金额档位" @click="showMoney=true" readonly>
                </div>
            </div>

            <van-action-sheet v-model="showSelect" title="选择区域">
                <div class="content">

                    <div class="topBox">
                        <div class="searchBox">
                            <van-icon name="search" class="searchBtn" size="30"></van-icon>
                            <input type="text" v-model="searchText" placeholder="请输入地区名称" @input="inputHandle">
                            <div @click="resHandle">重置</div>
                        </div>
                    </div>

                    <div class="listCom" v-if="areaList.length!=0">
                        <div v-for="(item,index) in areaList" :key="index" @click="select(item)">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            {{item.provinceName}}
                        </div>
                    </div>
                    <div v-else class="emptyBox">
                        <img src="./img/meetIngImg/no-his-img.png" alt="">
                        暂无区域
                    </div>
                    <div class="submitBtn" @click="selectSubmit">
                        <div>确认</div>
                    </div>
                </div>
            </van-action-sheet>


            <van-action-sheet v-model="showMoney" :actions="moneyList" cancel-text="取消" close-on-click-action
                @cancel="onCancel" @select="selectHandle"></van-action-sheet>


            <div @click="toSubmit" class="subBtn">立即提交</div>

            <div class="loading" v-show="isShow">
                <img src="img/load.gif">
            </div>
        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/url.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="text/javascript">

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var code = GetQueryString("code");

        console.log(code);
        // alert(code)



        var app = new Vue({
            el: '#app',
            data: {
                name: '',
                tel: '',
                area: '',
                areaId: '',
                money: '',
                moneyText: '',
                searchText: '',

                showSelect: false, //选择地址弹窗
                showMoney: false,//选择金额档位
                provinceId: 1,
                openId: '',

                areaList: [1],
                areaData: [1],

                moneyList: [
                    {
                        name: '一档（1000元）',
                        num: 1000
                    },
                    {
                        name: '二档（2000元）',
                        num: 2000
                    },
                    {
                        name: '三档（3000元）',
                        num: 3000
                    },
                ],

                isShow: false,

                isSign: false
            },
            methods: {
                // 重置选择的地址
                resHandle() {
                    this.area = ''
                    this.areaId = ''
                    this.areaData.forEach(ele => {
                        ele.checked = false
                    })
                    this.$toast('已重置')
                    this.areaList = this.areaData
                },

                resPage() {

                    this.name = ''
                    this.tel = ''
                    this.money = ''
                    this.moneyText = ''
                    this.area = ''
                    this.areaId = ''

                    this.resHandle()
                    this.getData()
                },

                getOpenId() {
                    this.isShow = true
                    var that = this
                    ajax({
                        // url: "https://www.ccclkj.cn:2033/signature/getSignature",
                        url: "http://192.168.0.103:2022/clActivity/getOpenId",
                        type: 'post',
                        data: { code: code },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            alert(res)
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                if (res.data.flag == 'error') {
                                    that.$toast('获取信息失败，请退出重试')
                                    return
                                } else {
                                    that.openId = res.data.openId
                                }
                                that.isShow = false
                            }
                        },
                    })
                },


                // 选择金额
                selectHandle(item) {
                    console.log(item);
                    this.moneyText = item.name
                    this.money = item.num
                    this.onCancel()
                },

                // 取消选择金额
                onCancel() {
                    this.showMoney = false
                },

                // 选择县
                select(obj) {
                    obj.checked = !obj.checked
                    this.areaData.forEach(ele => {
                        if (ele.provinceId == obj.provinceId) {
                            ele.checked = obj.checked
                        }
                    })

                },


                selectSubmit() {
                    this.area = ''
                    this.areaId = ''
                    var arr = this.areaData.forEach(item => {
                        if (item.checked) {
                            this.area += item.provinceName + ','
                            this.areaId += item.provinceId + ','
                        }
                    });

                    this.area = this.area.slice(0, -1);
                    this.areaId = this.areaId.slice(0, -1);
                    this.showSelect = false
                },
                inputHandle() {
                    if (this.searchText == '') {
                        this.areaList = this.areaData
                    } else {
                        this.areaList = this.areaData.filter(item => {
                            return item.provinceName.includes(this.searchText)
                        })
                    }

                },

                // 验证联系方式 
                validator: function (val) {
                    return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
                },

                getData() {
                    this.isShow = true
                    var that = this
                    ajax({
                        // url: "https://www.ccclkj.cn:2033/signature/getSignature",
                        url: "http://192.168.0.103:2022/clActivity/listProvince",
                        type: 'post',
                        data: { provinceId: 1 },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                var arr = res.data.filter(item => {
                                    item.checked = false
                                    return item.userId == null
                                })
                                that.areaList = arr
                                that.areaData = JSON.parse(JSON.stringify(arr))
                                that.isShow = false
                            }
                        },
                    })
                },
                toSubmit: function () {
                    // if (this.isSign) {
                    //     this.$toast('您已提交过订单，请勿重复提交')
                    //     return
                    // }

                    if (this.name == '') {
                        this.$toast('请输入姓名')
                        return
                    } else if (this.tel == '') {
                        this.$toast('请输入联系方式')
                        return
                    } else if (!this.validator(this.tel)) {
                        this.$toast('联系方式输入有误')
                        return
                    } else if (this.areaId == '') {
                        this.$toast('请选择地区')
                        return
                    } else if (this.money == '') {
                        this.$toast('请选择金额档位')
                        return
                    }
                    console.log(this.name);
                    console.log(this.tel);
                    console.log(this.area);
                    console.log(this.areaId);
                    console.log(this.money);
                    console.log(this.moneyText);

                    var _this = this;
                    this.isShow = true
                    ajax({
                        // url: "https://www.ccclkj.cn:2033/client/toSign",
                        url: "http://192.168.0.103:2022/clActivity/addUser",
                        type: 'post',
                        data: {
                            userName: _this.name,
                            userTel: _this.tel,
                            areaIds: _this.areaId,
                            areaStr: _this.area,
                            totalMoney: _this.money,
                            provinceId: _this.provinceId,
                            openId: _this.openId,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                _this.$toast('提交成功')
                                _this.isShow = false

                                _this.resPage()

                                localStorage.meetIngFlag = 100
                                // onBridgeReady(res.data)
                            }
                        },
                    })
                },
                validator: function (val) {
                    return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
                },
            },
            created: function () {

                // if (localStorage.meetIngFlag) {
                //     this.isSign = true
                //     this.$toast('您已提交过订单，请勿重复提交')
                // }

                this.getOpenId()
                this.getData()
            }
        })

        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        alert('支付成功')
                        app.resPage()
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }

    </script>
</body>

</html>